<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<!-- 标题 -->
			<view class="title">欢迎登录E学工</view>
			<!-- 账号密码 -->
			<input class="u-border-bottom u-m-b-50" type="text" v-model="loginForm.username" placeholder="请输入学/工号" />
			<input class="u-border-bottom u-m-b-50" type="password" v-model="loginForm.passwd" placeholder="请输入密码" />
			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">立即登录</button>
			<view class="alternative">
				<view class="password">忘记密码</view>
			</view>
		</view>
		<view class="buttom">
			<view class="loginType">
				<view class="wechat item">
					<view class="icon">
						<u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
					</view>
					微信
				</view>
			</view>
			<view class="hint">
				登录代表同意
				<text class="link"> E学工的用户协议和隐私政策 </text>
				，并授权使用您的账号信息（如头像、姓名等）以便统一管理
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import encryption from '@/utils/utils.js'
	import {saveLifeData} from '../../store/index.js'
	export default {
		data() {
			return {
				loginForm: {
					password: '',
					username: '',
				}
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.loginForm.username && this.loginForm.passwd) {
					style.color = "#fff";
					style.backgroundColor = "#007AFF";
				}
				return style;
			}
		},
		onLoad() {
			let lifeData = uni.getStorageSync('lifeData')
			console.log('lifeData', lifeData)
			
			// if (lifeData.access_token !== '') {
			// 	console.log('尝试默认登录')
			// 	this.getUserInfo()
			// } 
			// else if (lifeData.access_token === '' && lifeData.refresh_token != '') {
			// 	console.log('正在刷新登录')
			// 	this.$u.api.refreshLogin().then(res => {
			// 		console.log(res)
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// }
		},
		methods: {
			// 用户拿到token后获取信息的封装
			getUserInfo() {
				// 基本信息获取
				let that = this
				that.$u.api.getUserInfo(that.$store.state.userId).then(info => {
					console.log('用户信息', info.data)
					that.$u.vuex('userInfo', info.data)
					
					// that.$u.vuex('deptId', uni.getStorageSync('deptId'))
					
					// 部门信息获取
					that.$u.api.getDeptList().then(msg => {
						
						let dept = msg.data
						let university = dept.pop().name
						that.$u.vuex('userInfo.university', university)
						console.log('部门信息', dept)
						that.$u.vuex('userInfo.department', dept[0].name)
						that.$u.vuex('userInfo.major', dept[1].name)
						that.$u.vuex('userInfo.clazz', dept[2].name)
						
					}).catch(err => {
						console.log(err)
					})
				}).catch(err => {
					console.log('信息报错', err)
				})
				
				// 角色权限判定
				that.$u.api.getUserPermission(that.$store.state.userId).then(res => {
					res.data.forEach(ele => {
						if (ele.roleId === 1) {
							that.$u.vuex('permission', true)
						}
					})
				}).catch(err => {
					console.log(err)
				})
				
				
			},
			
			submit() {
				// if(this.loginForm.username && this.loginForm.passwd) {
				// 		this.$refs.uToast.show({
				// 			title: '登录成功',
				// 			type: 'success',
				// 			isTab: true,
				// 			url: '/pages/user/index'
				// 		})
				// }
				
				
				if(this.loginForm.username && this.loginForm.passwd) {
					
					/* TODO
					   为密码添加加密
					*/
					// const user = encryption({
					// 	data: this.loginForm,
					// 	key: 'pigxpigxpigxpigx',
					// 	param: ['password']
					// })
					
					/* WARNING!!!!
					   :author cy
					   此接口的请求方式为post
					   设计本意为：
					   用GET请求 若密码未进行加密则拒绝登录 
					   目前后端存在BUG且加密方式未知
					   先按照不安全的方法获取接口数据
					*/
					
					let that = this
					let params = {
						username: this.loginForm.username,
						password: this.loginForm.passwd,
						grant_type: 'password',
						scope: 'server'
					}
					
					console.log('params', params)
					
					that.$u.api.loginByUsername(params).then(res => {
						console.log('res.access_token', res.access_token)
						that.$u.vuex('access_token', res.access_token)
						that.$u.vuex('refresh_token', res.refresh_token)
						that.$u.vuex('userId', res.user_id)
						that.$u.vuex('deptId', res.dept_id)
						
						
						let tmp = uni.getStorageSync('lifeData')
						tmp['access_token'] = res.access_token
						tmp['refresh_token'] = res.refresh_token
						uni.setStorageSync('lifeData', tmp)
						// 登录成功将用户信息保存至全局
						// saveLifeData('access_token', res.access_token)
						// saveLifeData('refresh_token', res.refresh_token)
						
					
						// 获取用户信息
						this.getUserInfo()
						
						this.$refs.uToast.show({
							title: '登录成功',
							type: 'success',
							isTab: true,
							url: '/pages/user/index'
						})
					}).catch(err => {
						console.log(err);
						this.$refs.uToast.show({
							title: '账号或密码错误',
							type: 'error'
						})
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;

		.wrap {
			font-size: 28rpx;

			.content {
				width: 600rpx;
				margin: 80rpx auto 0;

				.title {
					text-align: left;
					font-size: 60rpx;
					font-weight: 500;
					margin-bottom: 100rpx;
				}

				input {
					text-align: left;
					margin-bottom: 10rpx;
					padding-bottom: 6rpx;
				}

				.tips {
					color: $u-type-info;
					margin-bottom: 60rpx;
					margin-top: 8rpx;
				}

				.getCaptcha {
					background-color: #87cefa;
					color: #696969;
					border: none;
					font-size: 30rpx;
					padding: 12rpx 0;

					&::after {
						border: none;
					}
				}

				.alternative {
					color: $u-tips-color;
					display: flex;
					justify-content: flex-end;
					margin-top: 30rpx;
				}
			}

			.buttom {
				.loginType {
					display: flex;
					padding: 350rpx 150rpx 150rpx 150rpx;
					justify-content: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: $u-content-color;
						font-size: 28rpx;
					}
				}

				.hint {
					padding: 20rpx 40rpx;
					font-size: 20rpx;
					color: $u-tips-color;

					.link {
						color: #007AFF;
					}
				}
			}
		}
	}
</style>
